<template>
  <div>
    <Title v-bind:title="title"></Title> 
    <div ref="chartContainer" style="height: 150px;"></div>  
  </div>  
</template>  
  
<script setup>  
import Title from './Title.vue';
import { ref, onMounted, onUnmounted } from 'vue';  
import { Line } from '@antv/g2plot';  
const title=ref('实时湿度曲线');
const chartContainer = ref(null);  
let chartInstance = null;  
  
// 示例数据  
const humidityData = [  
  { time: '00:00', wet: 40 },  
  { time: '01:00', wet: 45 },  
  { time: '02:00', wet: 50 },  
  { time: '03:00', wet: 55 },  

];  
  
// 初始化图表的函数  
function initChart() {  
  if (chartContainer.value) {  
    chartInstance = new Line(chartContainer.value, {  
      data: humidityData,  
      xField: 'time',  
      yField: 'wet',  
      smooth: true, // 是否平滑曲线  
      point: {  
        size: 5,  
        shape: 'circle',  
      },  
      yAxis: {  
        label: {  
          
        },  
      },  
      tooltip: {  
        showMarkers: false,  
      },  
    });  
  
    chartInstance.render();  
  }  
}  
  

onMounted(() => {  
  initChart();  
});  
</script>  
  
<style scoped lang="less">  
</style>